<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>88vue的列表渲染</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    遍历列表
    <div v-for="(item, index) of list"
              :key="item.id">
        <div>
           {{item.text}} ------ {{index}}
        </div>
        <span>
            {{item.text}} ------ {{item.id}}
        </span>
    </div>
    ------------------------
    <template v-for="(item, index) of list">
        <div>
           {{item.text}} ------ {{index}}
        </div>
        <span>
            {{item.text}} ------ {{item.id}}
        </span>
    </template>
    <div>---------------------------</div>
    遍历对象
    <div v-for="(item, key, index) of userInfo">
          {{item}} -----{{key}} ---- {{index}}
    </div>
  </div>
  <script>
    // pop push shift unshift splice sort reverse
    // 数组和页面一起跟着变
    var vm = new Vue({
      el: "#root",
      data: {
        list: [{
          id: "010120201",
          text: "hello"
        },{
          id: "0101202012",
          text: "claire"
        },{
          id: "010120203",
          text: "hello"
        },{
          id: "010120204",
          text: "frank"
        }],
        userInfo: {
          name: "claire",
          age: 28,
          gender: "female"
        }
      },

    })
  </script>
  
</body>
</html>